<!--
 * @Description:
 * @Author: Ronda
 * @Date: 2021-06-24 23:56:19
 * @LastEditors: hgy
 * @LastEditTime: 2022-10-14 17:26:48
-->
<template>
  <!-- 订单详情页 -->
  <div>
    <el-page-header content="详情页面" @back="$router.go(-1)" />
    <!-- 表格 -->
    <div class="table">
      <el-table :data="tableData.orderLines" style="width: 100%">
        <el-table-column
          prop="id"
          label="订单项编号"
          width="180"
          align="center"
        />
        <el-table-column
          prop="productId"
          label="产品编号"
          width="180"
          align="center"
        />
        <el-table-column prop="photo" label="产品图片" align="center">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="right">
              <img
                slot="reference"
                :src="scope.row.photo"
                width="30px"
                alt="加载失败"
              >
              <img :src="scope.row.photo" width="120px" alt="加载失败">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" align="center" width="180" />
        <el-table-column prop="number" label="数量" align="center" width="180" />
      </el-table>
      <!-- 卡片 -->
      <div class="card">
        <el-card shadow="hover">
          <div class="header">订单基本详情</div>
          <div class="bottom">
            <div>
              订单编号： <span>{{ tableData.id }}</span>
            </div>
            <div>
              订单金额：￥<span style="color: red">{{ tableData.total }}</span>元
            </div>
            <div>
              下单时间：<span>{{ tableData.orderTime | fmtDate }}</span>
            </div>
            <div>
              订单状态：

              <el-tag
                v-if="tableData.status == '待接单'"
                type="success"
              >待接单</el-tag>
              <el-tag
                v-if="tableData.status == '待派单'"
                type="info"
              >待派单</el-tag>
              <el-tag
                v-if="tableData.status == '待服务'"
                type="danger"
              >待服务</el-tag>
            </div>
          </div>
        </el-card>
        <el-card v-if="tableData.employee" shadow="hover">
          <div class="header">接单者信息</div>
          <div class="bottom">
            <div>
              接单单者： <span>{{ tableData.employee.username }}</span>
            </div>
            <div>
              接单者手机号：<span>{{ tableData.employee.telephone }}</span>
            </div>
          </div>
        </el-card>

        <el-card shadow="hover">
          <div class="header">派单者信息</div>
          <div class="bottom">
            <div>
              派单者：
              <span>{{ customer.username }}</span>
            </div>
            <div>
              派单者手机号：<span>{{ customer.telephone }}</span>
            </div>
          </div>
        </el-card>
        <el-card shadow="hover">
          <div class="header">雇主信息</div>
          <div class="bottom">
            <div>
              雇主： <span>{{ address.username }}</span>
            </div>

            <div>
              雇主手机号：<span>{{ address.telephone }}</span>
            </div>
            <div>
              服务地址：<span>{{ address.city }}</span>{{ address.area }}{{ address.address }}
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 订单id：{{ $route.query }} <br />注意接收路由携带的参数this.$route.query -->
  </div>
</template>

<script>
import { getOrder } from '@/api/account'
export default {
  data() {
    return {
      tableData: {},
      id: '',
      customer: {},
      address: {}
    }
  },
  computed: {},
  created() {
    /* this.$route.query.index是订单页传递的id值，需要发送请求，获取订单的详情数据，设置到数据模型中，然后vue视图中使用这些数据。 */
    // alert(this.$route.query);
    // this.tableData = this.$route.query.id;
    // if (sessionStorage.getItem("store")) {
    //   this.tableData = JSON.parse(sessionStorage.getItem("store"));
    this.id = this.$route.query.id
    this.getorder(this.id)
  },

  mounted() {
    // window.addEventListener("beforeunload", () => {
    //   sessionStorage.setItem("store", JSON.stringify(this.$route.query));
    // });
  },
  methods: {
    async getorder(id) {
      const res = await getOrder(id)
      console.log(res)
      this.tableData = res.data // {customer,address,}
      this.customer = res.data.customer
      this.address = res.data.address
    }
  }
}
</script>
<style lang='scss'>
.card {
  display: flex;
  justify-content: space-around;
  .el-card__body {
    width: 300px;
    div {
      margin-bottom: 15px;
    }
    .header {
      text-align: center;
      font-size: 20px;
      line-height: 50px;
      color: #fff;
      background-color: #2cb5ac;
    }
  }
}
</style>
